<!DOCTYPE html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>Blog Fullwidth</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

		<!-- favicon
		============================================ -->		
        <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico">
		
		<!-- Google Fonts
		============================================ -->		
        <link href='https://fonts.loli.net/css?family=Open+Sans:300,400,600,700' rel='stylesheet' type='text/css'>
	   
		<!-- Bootstrap CSS
		============================================ -->		
        <link rel="stylesheet" href="css/bootstrap.min.css">
		<!-- font-awesome CSS
		============================================ -->
        <link rel="stylesheet" href="css/font-awesome.min.css">
		<!-- owl.carousel CSS
		============================================ -->
        <link rel="stylesheet" href="css/owl.carousel.css">
        <link rel="stylesheet" href="css/owl.theme.css">
        <link rel="stylesheet" href="css/owl.transitions.css">
		<!-- meanmenu CSS
		============================================ -->
        <link rel="stylesheet" href="css/meanmenu.css">
		<!-- normalize CSS
		============================================ -->
        <link rel="stylesheet" href="css/normalize.css">
		<!-- main CSS
		============================================ -->
        <link rel="stylesheet" href="css/main.css">
		<!-- style CSS
		============================================ -->
        <link rel="stylesheet" href="style.css">
		<!-- responsive CSS
		============================================ -->
        <link rel="stylesheet" href="css/responsive.css">
		<!-- modernizr JS
		============================================ -->		
        <script src="js/vendor/modernizr-2.8.3.min.js"></script>
    </head>
    <body class="blog-col-1">
        <!--[if lt IE 8]>
            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->

        <!-- header-area start -->
		<header id="header" class="header-area">
			<div class="header-top">
				<div class="container">
					<div class="row">
						<div class="col-md-6 col-sm-6">
							<div class="header-top-left">
								<ul class="social-icons">
									<li><a href="#"><i class="fa fa-facebook"></i></a></li>
									<li><a href="#"><i class="fa fa-twitter"></i></a></li>
									<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
									<li><a href="#"><i class="fa fa-pinterest"></i></a></li>
									<li><a href="#"><i class="fa fa-soundcloud"></i></a></li>
								</ul>
							</div>
						</div>
						<div class="col-md-6 col-sm-6">
							<div class="header-top-right fix">
								<div class="header-links">
									<ul>
										<li><a href="#">Log in</a></li>
										<li><a href="#">Register</a></li>
									</ul>
								</div>
								<div class="header-search">
									<form action="#" method="post">
										<button type="button" class="search-toggler"><i class="fa fa-search"></i></button>
									</form>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div><!-- /.header-top -->
			<div class="header-bottom">
				<div class="container">
					<div class="row">
						<div class="col-md-3">
							<div class="logo">
								<a href="index-2.html"><img src="img/logo/logo.png" alt="Logo" /></a>
							</div>
						</div>
						<div class="col-md-9">
							<div class="main-menu">
								<nav>
								  <ul class="main-nav navbar-right">
									<li class="active dropdown"><a href="#">Home</a>
										<div class="sub-menu">
											<ul class="home-versions">
												<li><a href="index.html">Homepage Version 1</a></li>
												<li><a class="last" href="index-2.html">Homepage Version 2</a></li>
											</ul>
										</div>
									</li>
									<li class="dropdown"><a href="#">Pages</a>
										<div class="mega-menu pages">
											<span class="mega-menu-list">
												<a href="blog-column-3.html">Blog Column 3</a>
												<a href="blog-column-2.html">Blog Column 2</a>
												<a href="blog-fullwidth.html">Blog Fullwidth</a>
											</span>
											<span class="mega-menu-list">
												<a href="single-blog.html">Single Blog 1</a>
												<a href="single-blog-2.html">Single Blog 2</a>
												<a href="single-blog-3.html">Single Blog 3</a>
												<a href="single-blog-4.html">Single Blog 4</a>
											</span>
											<span class="mega-menu-list">
												<a href="404.html">404 Page</a>
												<a href="contact-us.html">Contact Us</a>
											</span>
										</div>
									</li>
									<li class="dropdown"><a href="#">Sport</a>
										<div class="mega-menu">
											<div class="single-post">
												<div class="post-img">
													<a href="single-blog.html"><img src="img/mega-menu/1.jpg" alt="" /></a>
												</div>
												<h6 class="post-title"><a href="#">Savior of Hustler</a></h6>
												<p class="post-date">July 10, 2015</p>
											</div>
											<div class="single-post">
												<div class="post-img">
													<a href="single-blog-2.html"><img src="img/mega-menu/2.jpg" alt="" /></a>
												</div>
												<h6 class="post-title"><a href="#">The Cracked Secret</a></h6>
												<p class="post-date">August 25, 2015</p>
											</div>
											<div class="single-post">
												<div class="post-img">
													<a href="single-blog-3.html"><img src="img/mega-menu/3.jpg" alt="" /></a>
												</div>
												<h6 class="post-title"><a href="#">The Cracked Secret</a></h6>
												<p class="post-date">September 5, 2015</p>
											</div>
										</div>	
									</li>
									<li><a href="#">Travel</a></li>
									<li><a href="#">Lifestyle</a></li>
									<li><a href="#">Tech</a></li>
									<li><a href="contact-us.html">Contact Us</a></li>
								  </ul>
								</nav>
							</div><!-- /.main-menu -->
						</div>
					</div>
				</div>
				<!-- mobile-menu-area start -->
				<div class="mobile-menu-area">
					<div class="container">
						<div class="row">
							<div class="col-md-12">
								<nav id="dropdown">
									<ul>
										<li><a href="#">home</a>
											<ul>
												<li><a href="index.html">home 1</a></li>
												<li><a href="index-2.html">home 2</a></li>
											</ul>
										</li>
										<li><a href="#">pages</a>
											<ul>
												<li><a href="#">Blog</a>
													<ul>
														<li><a href="blog-column-3.html">Blog Column 3</a></li>
														<li><a href="blog-column-2.html">Blog Column 2</a></li>
														<li><a href="blog-fullwidth.html">Blog Fullwidth</a></li>
													</ul>
												</li>
												<li><a href="#">single blog</a>
													<ul>
														<li><a href="single-blog.html">Single Blog 1</a></li>
														<li><a href="single-blog-2.html">Single Blog 2</a></li>
														<li><a href="single-blog-3.html">Single Blog 3</a></li>
														<li><a href="single-blog-4.html">Single Blog 4</a></li>
													</ul>
												</li>
												<li><a href="404.html">404 Page</a></li>
												<li><a href="contact-us.html">contact us</a></li>
											</ul>
										</li>
										<li><a href="#">sport</a></li>
										<li><a href="#">travel</a></li>
										<li><a href="#">lifestyle</a></li>
										<li><a href="#">tech</a></li>
										<li><a href="contact-us.html">contact us</a></li>
									</ul>
								</nav>
							</div>
						</div>
					</div>
				</div>
				<!-- mobile-menu-area end -->
			</div><!-- /.header-bottom -->
		</header>
        <!-- header-area end -->
        
		<!-- search-area start -->
		<div class="search-area">
			<div class="container">
				<div class="row">
					<div class="col-md-12">
						<div class="search-form">
							<span class="search-close"></span>
							<form action="#" method="post">
								<input type="text" placeholder="Search here..."/>
								<button type="submit" class="search-btn"><i class="fa fa-search"></i></button>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- search-area end -->
		
		<!-- heading-area start -->
		<div id="blog-heading" class="heading-area">
			<div class="container">
				<div class="row">
					<div class="col-md-12">
						<h2>Blog and Journal</h2>
					</div>
				</div>
			</div>
		</div>
		<!-- heading-area end -->
		
		<!-- blog-content-area start -->
		<div id="blog-content" class="blog-content-area fix">
			<div class="container">
				<div class="row">
					<div class="col-md-12">
						<div class="single-blog-post">
							<div class="post-img">
								<a href="#"><img src="img/blog-column-1/1.jpg" alt="Popular Post" /></a>
								<a href="#" class="post-tag">photography</a>
								<div class="post-info">
									<p>
										<span class="post-date"><a href="#">July 10, 2015</a></span>
										<span class="post-comments"><a href="#">3 comments</a></span>
										<span class="post-social-links">
											<a href="#" data-toggle="tooltip" data-placement="bottom" title="Likes"><i class="fa fa-heart"></i></a>
											<a href="#" data-toggle="tooltip" data-placement="bottom" title="Facebook"><i class="fa fa-facebook"></i></a>
											<a href="#" data-toggle="tooltip" data-placement="bottom" title="Twitter"><i class="fa fa-twitter"></i></a>
											<a href="#" data-toggle="tooltip" data-placement="bottom" title="Google+"><i class="fa fa-google-plus"></i></a>
											<a href="#" data-toggle="tooltip" data-placement="bottom" title="Pinterest"><i class="fa fa-pinterest"></i></a>
										</span>
									</p>
								</div>
							</div>
							<div class="post-content">
								<h6 class="post-title"><a href="#">Woman of Slaves</a></h6>
								<p class="post-short-desc">Lorem ipsum dolor sit amet, consegectetur adipisicing 
								elit, sed do eiusmod tem por incididunt labore et dolore  aliqua. Ut enim ad minim 
								veniam, nostrud exercitation ullamco laboris nisi onsegectetur adipisicing elit, 
								or incididunt labore et dolore  aliqua. Ut enim ad minim veniam, nostrud or 
								incididunt labore et dolore  aliqua. exercitation ullamco laboris nisi onsegectetur 
								adipisicing elit,</p>
								<a href="#" class="continue-link">Continue Reading...</a>
							</div>
						</div><!-- /.single-blog-post -->
					</div>
					<div class="col-md-12">
						<div class="single-blog-post">
							<div class="post-img">
								<a href="#"><img src="img/blog-column-1/2.jpg" alt="Popular Post" /></a>
								<a href="#" class="post-tag">photography</a>
								<div class="post-info">
									<p>
										<span class="post-date"><a href="#">July 10, 2015</a></span>
										<span class="post-comments"><a href="#">3 comments</a></span>
										<span class="post-social-links">
											<a href="#" data-toggle="tooltip" data-placement="bottom" title="Likes"><i class="fa fa-heart"></i></a>
											<a href="#" data-toggle="tooltip" data-placement="bottom" title="Facebook"><i class="fa fa-facebook"></i></a>
											<a href="#" data-toggle="tooltip" data-placement="bottom" title="Twitter"><i class="fa fa-twitter"></i></a>
											<a href="#" data-toggle="tooltip" data-placement="bottom" title="Google+"><i class="fa fa-google-plus"></i></a>
											<a href="#" data-toggle="tooltip" data-placement="bottom" title="Pinterest"><i class="fa fa-pinterest"></i></a>
										</span>
									</p>
								</div>
							</div>
							<div class="post-content">
								<h6 class="post-title"><a href="#">The Man of the Heat</a></h6>
								<p class="post-short-desc">Lorem ipsum dolor sit amet, consegectetur adipisicing 
								elit, sed do eiusmod tem por incididunt labore et dolore  aliqua. Ut enim ad minim 
								veniam, nostrud exercitation ullamco laboris nisi onsegectetur adipisicing elit, 
								or incididunt labore et dolore  aliqua. Ut enim ad minim veniam, nostrud or 
								incididunt labore et dolore  aliqua. exercitation ullamco laboris nisi onsegectetur 
								adipisicing elit,</p>
								<a href="#" class="continue-link">Continue Reading...</a>
							</div>
						</div><!-- /.single-blog-post -->
					</div>
					<div class="col-md-12">
						<div class="single-blog-post">
							<div class="post-img">
								<a href="#"><img src="img/blog-column-1/3.jpg" alt="Popular Post" /></a>
								<a href="#" class="post-tag">photography</a>
								<div class="post-info">
									<p>
										<span class="post-date"><a href="#">July 10, 2015</a></span>
										<span class="post-comments"><a href="#">3 comments</a></span>
										<span class="post-social-links">
											<a href="#" data-toggle="tooltip" data-placement="bottom" title="Likes"><i class="fa fa-heart"></i></a>
											<a href="#" data-toggle="tooltip" data-placement="bottom" title="Facebook"><i class="fa fa-facebook"></i></a>
											<a href="#" data-toggle="tooltip" data-placement="bottom" title="Twitter"><i class="fa fa-twitter"></i></a>
											<a href="#" data-toggle="tooltip" data-placement="bottom" title="Google+"><i class="fa fa-google-plus"></i></a>
											<a href="#" data-toggle="tooltip" data-placement="bottom" title="Pinterest"><i class="fa fa-pinterest"></i></a>
										</span>
									</p>
								</div>
							</div>
							<div class="post-content">
								<h6 class="post-title"><a href="#">Summer Vacation Memories</a></h6>
								<p class="post-short-desc">Lorem ipsum dolor sit amet, consegectetur adipisicing 
								elit, sed do eiusmod tem por incididunt labore et dolore  aliqua. Ut enim ad minim 
								veniam, nostrud exercitation ullamco laboris nisi onsegectetur adipisicing elit, 
								or incididunt labore et dolore  aliqua. Ut enim ad minim veniam, nostrud or 
								incididunt labore et dolore  aliqua. exercitation ullamco laboris nisi onsegectetur 
								adipisicing elit,</p>
								<a href="#" class="continue-link">Continue Reading...</a>
							</div>
						</div><!-- /.single-blog-post -->
					</div>
					<div class="load-more-button text-center">
						<a href="#" title="Load More">
							<i class="fa fa-caret-left"></i>load more<i class="fa fa-caret-right"></i>
						</a>
					</div>
				</div>
			</div>
		</div>
		<!-- blog-content-area end -->
		
		<!-- footer-area start -->
		<footer id="footer" class="footer-area text-center">
			<div class="footer-logo">
				<a href="#"><img src="img/logo/footer-logo.png" alt="Footer Logo" /></a>
			</div>
			<p class="copyright-text">&copy; Copyright© 2015 Blogging. All right reserved.</p>
		</footer>
		<!-- footer-area end -->
		
		<!-- jquery
		============================================ -->		
        <script src="js/vendor/jquery-1.11.3.min.js"></script>
		<!-- bootstrap JS
		============================================ -->		
        <script src="js/bootstrap.min.js"></script>		
		<!-- meanmenu JS
		============================================ -->		
        <script src="js/jquery.meanmenu.js"></script>
		<!-- owl.carousel JS
		============================================ -->		
        <script src="js/owl.carousel.min.js"></script>
		<!-- scrollUp JS
		============================================ -->		
        <script src="js/jquery.scrollUp.min.js"></script>
		<!-- plugins JS
		============================================ -->		
        <script src="js/plugins.js"></script>
		<!-- main JS
		============================================ -->		
        <script src="js/main.js"></script>
    <div style='background: black;color: #2a62bc;font-size: 12px;text-align: center;padding: 10px;'>注意：本模版中所涉及的图片，文字，媒体文件，均仅供个人学习使用。如用于其它目的，请自行承担相应的道德和法律责任。</div></body>
</html>
